<template>
    <div style="margin-left: 20px;width: 80vw">
        <div class="selallcom">
            <el-table
                    :data="coms"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="商品编号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="商品单价">
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="商品库存">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="商品状态"
                        width="140px">
                    <template slot-scope="scope">
                        <el-select disabled="true" v-model="scope.row.state">
                            <el-option v-for="s in sta"
                                       :key="s"
                                       :label="s.statename"
                                       :value="s.state">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="updComtosec(scope.row)" type="text">添加至秒杀</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @current-change="toPage"
                        layout="prev, pager, next"
                        :total="currentPageCount"
                        :current-page="currentPageNo"
                        :page-size="6">
                </el-pagination>
            </div>

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <span>
                    <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="秒杀商品折扣：">
                    <el-input v-model="sec.discount"></el-input>
                </el-form-item>
                        <el-form-item label="秒杀商品数量：">
                    <el-input v-model="sec.stock"></el-input>
                </el-form-item>
            </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updSecCom">确 定</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Selallcom",
        data() {
            return {
                dialogVisible: false,
                coms: [
                    {
                        id: '1',
                        name: '2233',
                        price: '23',
                        stock: '2233',
                        state: '1'
                    }
                ],
                sec: {
                    storeid: '',
                    commodityid: '',
                    discount: '',
                    stock: ''
                },
                sta: [{statename: '商品已下架', state: 0}, {statename: '商品已上架', state: 1}],
                //当前的页码
                currentPageNo: 1,
                //最大页码
                currentPageCount: 1
            }
        },
        methods: {
            toPage: function (num) {
                this.currentPageNo = num;
                this.loadData();

            },
            loadData: function () {
                this.axios.get("/selectAllCom", {
                    params: {
                        pageNo: this.currentPageNo, pageSize: 6, storeid: 1, state: 1
                    }
                })
                    .then((response) => {
                        this.coms = response.data.data;
                        this.currentPageCount = response.data.pageCount;
                    })
            },
            updComtosec: function (row) {
                this.dialogVisible = true;
                this.sec.storeid = '1';
                this.sec.commodityid = row.id;
            },
            updSecCom: function () {
                var count = 0;
                this.axios.get("/updComStock", {
                    params: {id: this.sec.commodityid, stock: this.sec.stock}
                })
                    .then((response) => {
                        count = response.data;
                    })
                this.axios.post("/insertSec", this.sec)
                    .then((response) => {
                        count = response.data;
                    })

                setTimeout(() => {
                    if (count == 1) {
                        this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('更新失败');
                    }

                }, 2000);

                this.dialogVisible = false;
                this.loadData();
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(response => {
                        done();
                        alert(response)
                    })
                    .catch(error => {
                        alert(error);
                    });
            }
        }, beforeRouteEnter(to, from, next) {
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadData();
            });

        }
    }
</script>

<style scoped>
    .selallcom {
        margin: 50px 50px 50px 50px;
    }
</style>